<template>
    <div class="visit_records">
      <head-top head-title="拜访记录" go-back="true"></head-top>
      <div class="records_body">
        <ul class="basic_data">
          <li>
            <span>房号：</span>
            <input type="text" placeholder="房号" readonly v-model="visitData.house_num">
          </li>
          <li>
            <span>电话拜访记录：</span>
            <input type="text" v-if="visitData.phone_msg!==''" readonly v-model="visitData.phone_msg">
            <input type="text" v-if="visitData.phone_msg===''" readonly placeholder="暂无记录">
          </li>
          <li>
            <span>预约送票时间：</span>
            <input type="text" placeholder="时间" readonly v-model="visitData.send_vote_time">
          </li>
          <li>
            <span>备注选择：</span>
            <div class="items">
              <div v-for="(item,index) in optiontext" :key="index" class="item">
                <span :class="(active === index)?'active':'title'" @click="choiceType(item,index)">
                {{item.text}}
                </span>
               </div>
            </div>
          </li>
          <li>
            <span>其他备注：</span>
            <textarea v-model.trim="dText" placeholder="请在此填写备注..." cols="30" rows="10"></textarea>
          </li>
          <!--图片展示-->
          <li style="border-bottom: none">
            <span>拜访图片：</span>
          </li>
          <li v-if="visitData.visit_imgs">
            <div class="pic_img  clearfix">
              <!--微信浏览器-->
              <div v-if="weixinShow" v-for="(item,index) in visitData.visit_imgs" :key="index" class="img_li">
                <div class="img" v-lazy:background-image="item" @click="preview(index)"></div>
              </div>
              <!--普通浏览器-->
              <div v-if="ordinaryShow" class="img-box" v-for="(url, index) in visitData.visit_imgs"
                   :style="{'background-image': 'url(' + url + ')'}"
                   :key="index+'a'">
                <img preview="1" :src="url" alt="">
              </div>
            </div>
          </li>
          <div class="post_img">
            <!--微信浏览器图片上传组件-->
            <ident-publish v-if="weixinShow" @getImage="getImage"></ident-publish>
            <!--普通浏览器图片上传组件-->
            <ident-pub v-if="ordinaryShow" @getImg="getImg"></ident-pub>
          </div>
        </ul>
        <div class="post_records">
          <button @click="postRecord">提交</button>
        </div>
      </div>

    </div>
</template>

<script>
  import headTop from '../header/Header'
  import IdentPublish from '../common/IdentPublish'
  import IdentPub from '../common/Identpublish1'
  import {getVisitRecord, postRecord} from '../../api/toupiaotongji'
  import {IsWeiXin} from '../../common/js/isWeiXin'
  import wx from 'weixin-js-sdk'
  import {Toast} from 'mint-ui'

  export default {
    name: 'VisitRecords',
    data() {
      return {
        visitData: {}, // 基本信息
        active: -1, // 类型值
        optiontext: [
          {text: '上门-不领票', id: 0},
          {text: '上门-找不到业主', id: 1},
          {text: '上门-非自住', id: 2}
          // {text: '其他情况', id: 3}
        ],
        choseType: '', // 所选备注类型
        dText: '', // 文本框值
        serverIds: [], // 拜访图片（微信端）
        ordinaryShow: {
          type: Boolean // 普通浏览器
        },
        weixinShow: {
          type: Boolean // 微信浏览器
        },
        ordinaryImg: [] // 拜访图片（普通浏览器端）
      }
    },
    created () {
      // 判断是否是微信浏览器
      if (IsWeiXin()) {
        this.ordinaryShow = false
        this.weixinShow = true
      } else {
        this.ordinaryShow = true
        this.weixinShow = false
      }
      // console.log(this.$route.params)
      this._getVisitRecord()
    },
    methods: {
      // 基本信息接口
      _getVisitRecord() {
        getVisitRecord(this.$route.params.houseid, this.$route.params.vid, this.$route.params.newold).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.visitData = res.data
            // console.log(this.visitData)
            if (this.visitData.site_msg) {
              this.dText = this.visitData.site_msg
            } else {
              this.dText = ''
            }
          }
        })
      },

      // 备注选择
      choiceType (item, index) {
        this.active = index
        // console.log(item)
        this.choseType = item.text
        this.dText = item.text
      },
      // 图片上传（微信）
      getImage (image) {
        this.serverIds = image
      },
      // 图片上传（普通）
      getImg (image) {
        this.ordinaryImg = image
        console.log(this.ordinaryImg)
      },
      // 提交记录
      postRecord () {
        // console.log('备注选择：' + this.choseType + '------其他备注的描述：' + this.dText)
        if (IsWeiXin()) {
          postRecord(this.$route.params.houseid, this.$route.params.vid, this.dText, this.serverIds, this.$route.params.newold).then(res => {
            console.log(res)
            if (res.code === 200) {
              Toast({
                message: res.error,
                position: 'middle',
                duration: 1000
              })
              this.$router.back(-1)
            } else if (res.code === 400) {
              Toast({
                message: res.error,
                position: 'middle',
                duration: 1000
              })
              return
            }
          })
        } else {
          postRecord(this.$route.params.houseid, this.$route.params.vid, this.dText, this.ordinaryImg, this.$route.params.newold).then(res => {
            if (res.code === 200) {
              Toast({
                message: res.error,
                position: 'middle',
                duration: 1000
              })
              this.$router.back(-1)
            } else if (res.code === 400) {
              Toast({
                message: res.error,
                position: 'middle',
                duration: 1000
              })
              return
            }
          })
        }
      },
      // 图片预览
      preview (index) {
        wx.previewImage({
          current: this.visitData.visit_imgs[index],
          urls: this.visitData.visit_imgs
        })
      }
    },
    components: {
      headTop,
      IdentPublish,
      IdentPub
    }
  }
</script>

<style lang="scss" scoped>
.visit_records{
  width: 100%;
  padding-top: 40px;
  .records_body{
    .basic_data{
      width: 100%;
      li{
        padding: 10px;
        border-bottom: 1px solid #f2f2f2;
        display: inline-flex;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        align-items: center;
        span{
          font-size: 14px;
        }
        input{
          border: none;
          /*border-bottom: 1px solid #cccccc;*/
          font-size: 14px;
          outline: none;
          background: #f2f2f2;
          padding: 5px 10px;
          color: #595959;
        }
        .pic_img {
          width: 100%;
          margin-top: 7px;
          /*微信浏览器的图片预览的样式*/
          .img_li {
            width: 24%;
            height: 80px;
            margin-top: 1%;
            float: left;
            margin-left: 1%;
            background: #f2f2f2;
            .img {
              width: 100%;
              height: 100%;
              background-size: cover;
            }
          }
          /*普通浏览器的图片预览的样式*/
          .img-box {
            float: left;
            /*width: 30%;*/
            padding: 11%;
            margin: 0.65%;
            position: relative;
            overflow: hidden;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            img {
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              opacity: 0;
            }
          }
        }
        .items{
          width: 78%;
          .item{
            float: left;
            width: 46%;
            height: 30px;
            line-height: 30px;
            margin:7px 0px;
            text-align: center;
            .title{
              display: inline-block;
              border: 1px solid #d9d9d9;
              border-radius: 3px;
              color: #292929;
              font-size: 13px;
            }
            .active{
              display: inline-block;
              background: #0078de;
              color: #ffffff;
              font-size: 13px;
            }
          }
        }
        textarea{
          resize: none;
          width: 70%;
          height: 60px;
          border: 1px solid #c2c2c2;
          outline: none;
          padding: 5px 10px;
          font-size: 14px;
          color: #595959;
        }
      }
      li:last-child{
        border-bottom: none;
      }
    }
    .post_records{
      width: 100%;
      display: inline-flex;
      justify-content: center;
      padding-bottom: 20px;
      button{
        width: 80%;
        background: #0078de;
        color: white;
        font-size: 15px;
        padding: 10px 0;
      }
    }
  }
  .items{
    .item{
      float: left;
      width: 50%;
      height: 30px;
      line-height: 30px;
      margin:7px 0px;
      text-align: center;
      .title{
        width: 82%;
        display: inline-block;
        border: 1px solid #d9d9d9;
        // padding: 8px 10px;
        border-radius: 3px;
        color: #292929;
      }
      .active{
        width: 82%;
        display: inline-block;
        background: #0078de;
        color: #ffffff;
      }
    }
  }
}
</style>
